<!-- ContentImage.vue -->
<template>
    <div class="image-block">
      <el-image 
        :src="block.url"
        :alt="block.caption"
        fit="scale-down"
        lazy
        :preview-src-list="[block.url]"
      >
        <template #error>
          <div class="image-error">
            <el-icon><Picture /></el-icon>
            <span>图片加载失败</span>
          </div>
        </template>
      </el-image>
      <div v-if="block.caption" class="image-caption">
        {{ block.caption }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { Picture } from '@element-plus/icons-vue'
  
  const props = defineProps({
    block: {
      type: Object,
      required: true,
      validator: (b) => !!b.url && b.type === 'image'
    }
  })
  </script>
  
  <style scoped>
  .image-block {
    margin: 2rem 0;
    text-align: center;
  }
  
  .image-caption {
    color: var(--el-text-color-secondary);
    font-size: 0.9em;
    margin-top: 0.5rem;
  }
  
  .image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: var(--el-fill-color-light);
    color: var(--el-color-info);
    gap: 8px;
  }
  </style>